<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<style type="text/css">
        *{
        	margin:0;padding:0;
        }
        li
        {
        	list-style: none;float: left;width:100px;text-align: center;border:1px solid black;cursor: pointer;
        }
        .active
        {
        	border-bottom: 2px solid red;
        }
        .item
        {
        	border:1px solid black;width:500px;height:300px;display: none;
        }
        img
        {
        	width:500px;height:300px;position: absolute;top:0px;left:0;
        }
        .box
        {
        	position: relative;top:30px;
        }

        .selected
        {
        	display: block!important;
        }

	</style>
</head>
<body>
  
    <div>
    	<ul>
    		<li class="active">鱼</li>
    		<li>蛋糕</li>
    		<li>牛奶</li>
    		<li>虾</li>
    	</ul>
    	<div class="box">
    		<div class="item selected">
    			<a href="#"><img src="images/fish.jpg" alt=""></a>
    		</div>
    		<div class="item">
    			<a href="#"><img src="images/dangao.jpg" alt=""></a>
    		</div>
    		<div class="item">
    			<a href="#"><img src="images/niunai.jpg" alt=""></a>
    		</div>
    		<div class="item">
    			<a href="#"><img src="images/xia.jpg" alt=""></a>
    		</div>
    	</div>
    </div>
	
</body>
</html>
<script type="text/javascript">
	$(function(){
		//1、给每个li注册鼠标移入事件
		$('li').mouseenter(function(event) {
			//给当前个li加上类样式,其他的不加
			$(this).addClass('active').siblings().removeClass('active');
			//获取图片对应的下标
			var idx = $(this).index();
			//移动鼠标，显示每个和li下标对应的图片
			$('.item').eq(idx).addClass('selected').siblings().removeClass('selected');
		});

	});

</script>